<script setup lang="ts">
import type { AddressType } from "@/type/lidare"
import { areaList } from '@vant/area-data';
import { ref } from 'vue';
import { showToast } from 'vant';
import { useAddressStore } from "@/stores/counter"
const emit = defineEmits(['closeThisComponent']);
const closeThis = () => {
  emit("closeThisComponent");
}

const searchResult = ref([]);

const strore = useAddressStore();
const { changeAddressList } = strore;
const onSave = (item: AddressType) => {
  console.log(item);
  item = {
    ...item,
    address: `${item.province} ${item.city} ${item.country} ${item.addressDetail}`,
    id: Date.now() + "" + Math.floor(Math.random() * 10000)
  };
  changeAddressList({ item, type: 0 });
  showToast("保存成功");
  closeThis();
}
const onDelete = () => showToast('delete');
const onChangeDetail = (val: string) => {
  console.log(val, searchResult.value);

  // if (val) {
  //   searchResult.value = [
  //     {
  //       name: '黄龙万科中心',
  //       address: '杭州市西湖区',
  //     },
  //   ];
  // } else {
  //   searchResult.value = [];
  // }
}
</script>
<template>
  <div class="address-edit animate__animated animate__zoomIn animate__faster">
    <header class="header">
      <van-icon @click.stop="closeThis" class="icon" name="arrow-left" />
      <div class="header-text">地址编辑</div>
    </header>
    <van-address-edit :area-list="areaList" show-delete show-set-default show-search-result :search-result="searchResult"
      :area-columns-placeholder="['请选择', '请选择', '请选择']" @save="onSave" @delete="onDelete"
      @change-detail="onChangeDetail" />
  </div>
</template>
<style lang="scss" scoped>
.address-edit {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 50;
  background-color: var(--bgc-white);
  width: 100%;
  height: 100vh;
  overflow: scroll;

  &::-webkit-scrollbar {
    display: none;
  }

  .header {
    position: sticky;
    left: 0;
    top: 0;
    z-index: 10;
    width: 100%;
    height: .5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding: 0 .15rem;
    background-color: var(--bgc-white);

    .icon {
      font-size: .2rem;
      color: var(--text-gray);
    }

    .header-text {
      flex-grow: 1;
      text-align: center;
      font-size: .16rem;
    }
  }
}
</style>
<style lang="scss">
.address-edit {
  .van-button--primary {
    background-color: var(--bgc-red);
    border-color: var(--bgc-red);
  }
}
</style>